<template>
  <!-- component -->
  <!-- Container -->
  <div class="float-right">
    <el-button type="text" @click="changeLanguage('zh')">中文</el-button>
    <el-button type="text" @click="changeLanguage('en')">English</el-button>
  </div>
  <div class="flex flex-wrap min-h-screen w-full content-center justify-center bg-gray-200 py-10">
    <!-- Login component -->
    <div class="flex shadow-md">
      <!-- Login form -->
      <div class="flex flex-wrap content-center justify-center rounded-l-md bg-white" style="width: 24rem; height: 32rem;">
        <div class="w-72">
          <!-- Heading -->
          <h1 class="text-xl font-semibold">{{$t('login.back')}}</h1>
          <small class="text-gray-400">{{ $t('login.details') }}</small>

          <!-- Form -->
          <form class="mt-4">
            <div class="mb-3">
              <label class="mb-2 block text-xs font-semibold">{{ $t('login.userName') }}</label>
              <input type="text" placeholder="Enter your username" class="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500" v-model="username"/>
            </div>

            <div class="mb-3">
              <label class="mb-2 block text-xs font-semibold">{{ $t('login.password') }}</label>
              <input type="password" placeholder="*****" class="block w-full rounded-md border border-gray-300 focus:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-700 py-1 px-1.5 text-gray-500" v-model="password"/>
            </div>

            <div class="mb-3 flex flex-wrap content-center">
              <input id="remember" type="checkbox" class="mr-1 checked:bg-purple-700" /> <label for="remember" class="mr-auto text-xs font-semibold">{{$t('login.remember')}}</label>
              <a href="#" class="text-xs font-semibold text-purple-700">{{$t('login.forget')}}</a>
            </div>

            <div class="mb-3">
              <button class="mb-1.5 block w-full text-center text-white bg-purple-700 hover:bg-purple-900 px-2 py-1.5 rounded-md" @click.prevent="login">{{$t('login.loginBtn')}}</button>
              <button class="flex flex-wrap justify-center w-full border border-gray-300 hover:border-gray-500 px-2 py-1.5 rounded-md">
                <img class="w-5 mr-2" src="https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA">
                Sign in with Google
              </button>
            </div>
          </form>

          <!-- Footer -->
          <div class="text-center">
            <span class="text-xs text-gray-400 font-semibold">{{$t('login.account')}}</span>
            <button class="text-xs font-semibold text-purple-700" @click.prevent="register">{{$t('login.register')}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {loginApi} from "../api/User";
import {useRouter} from "vue-router"
import {useI18n} from "vue-i18n";
const {locale} = useI18n();
const router = useRouter();
const username = $ref('')
const password = $ref('')
const login = async () => {
  try {
    await loginApi(username,password).then((res) => {
      if (res.data.code == 200) {
        sessionStorage.setItem('username', res.data.data.userName)
        // 跳转到首页
        router.push('/home')
      }
    })
  } catch (error) {
    console.error(error)
  }
}

//跳转到注册页面
const register = () => {
  router.push('/register')
}

// 切换语言
const changeLanguage = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang)
}
</script>

<style scoped>

</style>